@class-prefix-text-area: ~'uabm-text-area';

.@{class-prefix-text-area} {
  --font-size: var(--uabm-font-size-9);
  --color: var(--uabm-color-text);
  --placeholder-color: var(--uabm-color-light);
  --disabled-color: var(--uabm-color-weak);
  --text-align: left;
  --count-text-align: right;

  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

.@{class-prefix-text-area}-element {
  font-family: var(--uabm-font-family);
  resize: none; // 元素不能被用户缩放。
  flex: auto;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  margin: 0;
  color: var(--color);
  font-size: var(--font-size);
  line-height: 1.5;
  background: transparent;
  border: 0;
  outline: none; // 去除轮廓（outline）是绘制于元素周围的一条线
  appearance: none; // 关闭元素外貌
  min-height: 1.5em;
  text-align: var(--text-align);

  &::placeholder {
    color: var(--placeholder-color);
    font-family: inherit;
  }

  &:-webkit-autofill {
    background-color: transparent;
  }

  &:disabled {
    color: var(--disabled-color);
    cursor: not-allowed;
    opacity: 1;
    -webkit-text-fill-color: var(--disabled-color);
  }

  &:read-only {
    cursor: default;
  }

  &:invalid {
    box-shadow: none;
  }

  // IE10 及以上版本 type="text" 或 type="search" 属性时，会自动显示一个清除按钮，需通过 ::-ms-clear 伪元素来修改按钮的样式和行为
  &::-ms-clear {
    display: none;
  }

  &[readonly] {
    pointer-events: none;
  }
}

.@{class-prefix-text-area}-count {
  text-align: var(--count-text-align);
  color: var(--uabm-color-weak);
  font-size: var(--uabm-font-size-9);
  padding-top: 8px;
}
